ZK10 Preview: 30x Lighter and 300x Faster with Client MVVM

Author
James Chu, Engineer, Potix Corporation

Date
April 26, 2022

Version
ZK 10.0.0.FL.20220412-Eval

Introduction

MVVM - Model-View-ViewModel is a design pattern separating the data and logic from the presentation, which helps you to reduce the code complexity. As many of you already know, under this pattern, we have a data binding mechanism called ZK Bind that automatically does the data-binding between the View and the ViewModel for you.

However, in order to track all the nodes and perform the "magic", a lot of information has to be saved on the server-side.

Now, with the new ZK 10 client-side MVVM, we are bringing the effort to the client-side and therefore minimizing the memory used on the server-side. This greatly improves memory consumption and consequently lowers response time.

Best of all, this feature can be applied to existing ZK MVVM projects. No or minimum code change is required for application developers.

Test Result

To determine the improvement, we performed a test, using MVVM binding to generate about 1,000 ZK components to the client. As for the testing tools, we used JMeter to record the average response time, and VisualVM to record the memory consumption of each test case.

ZK 10 memory consumption

ZK 10 response time

As you can see, with 400 concurrent users, the response time went down from 1377 to 7.5 which is 183 times faster. The memory used went down from 1373 to 61, which saved 95% of the memory used. Also, as concurrent users grow, the orange line remains flat, meaning it can scale gracefully.

Test Environment

• Hardware
  • CPU: Mac M1 Pro chip with 8-core CPU
  • Memory: 16.00 GB

• Software
  • ZK 9.6.1 EE
  • ZK 10.0.0 EE FL(10.0.0.FL.20220412-Eval)
  • Jetty -9.4.24.v20191120
  • OpenJDK 11.0.14.1
  • Apache JMeter 5.4.3
  • Visual VM 2.1.2

• Configurations
  • Jetty
    • -Xmx4096m
  • JMeter
    • 100, 200, 400, 800 concurrent threads in 1 second

Test Plan

To simulate using a large amount of MVVM property binding, we generate a list with 3,000 items to simulate the database. And we force it to render about 1,000 ZK components in the resulting view.

Versions: we compare ZK 9.6.1 EE (current implementation) and ZK 10.0.0 EE FL (the new client-mvvm).

Testing is done by simulating having 100 to 800 concurrent users accessing the page.

Test Case

The whole performance testing project for this article can be found on zk10-performance-test.

listbox-rod.zul:

<div viewModel="@id('vm') @init('TestCollectionVM')">
	<listbox width="200px" height="200px" model="@load(vm.list)">
		<template name="model">
			<listitem label="@load(each)" />
		</template>
	</listbox>
</div>

TestCollectionVM.java:

public class TestCollectionVM {
	private ItemService itemService = ItemService.getInstance();
	public List<Integer> getList() {
		return itemService.getItems(); //simulate database
	}
}

Summary

The new ZK 10 client-side MVVM significantly improves memory usage and response time. It is approximately 30 to 300 times lighter and faster than the current version. Also, it scales nicely as the number of concurrent users grows.

We can now enjoy the MVVM pattern in our applications without worrying about performance and scaling. It helps us do more with fewer resources, and handle increased users and workload!

We hope you will like this MVVM enhancement we are bringing you in ZK 10. We will release more articles on how you can upgrade your existing project to use this feature, so stay tuned with us!

For more ZK 10 articles, visit here.

Comments

Copyright © Potix Corporation. This article is licensed under GNU Free Documentation License.